$(function () {
    // alert(1)
    initCate()
    function initCate() {
        // 获取文章类别下拉菜单内容
        $.ajax({
            url: '/my/article/cates',
            success(res) {
                // console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, { icon: 5 })
                }
                // 渲染数据到下拉列表,通过模板引擎
                var htmlStr = template('cate-tpl', res)
                $('select').html(htmlStr)
                // 因为select中的内容是动态插入的，so，要用layui的重新渲染
                layui.form.render()

            }

        })
    }
    // 初始化富文本编辑器
    initEditor()
    //  初始化文章封面图片裁剪区
    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $('#image')
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options)
    // 点击选择封面按钮触发文件选中click
    $('#btnChooseImage').on('click', function () {
        $('#coverFile').click()
    })
    // 选择了新图片就更换裁剪区域的图片
    // 给文件选择框绑定change事件
    $('#coverFile').on('change', function () {
        var files = this.files
        if (files.length < 0) {
            return layui.layer.msg('请选择图片', { icon: 5 })
        }
        var file = files[0]
        // 2. 根据选择的文件，创建一个对应的 URL 地址：
        var newImgURL = URL.createObjectURL(file)
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', newImgURL)  // 重新设置图片路径
            .cropper(options)        // 重新初始化裁剪区域

    })
    // button没有设置type，默认是提交submit按钮
    //绑定提交事件
    //   准备文章状态变量（ajax传参state）
    var state = '已发布'
    // 单击了“存为草稿”就修改state的值
    $('#btnSave2').on('click', function () {
        state = '草稿'
    })
    $('#form-pub').on('submit', function (e) {
        e.preventDefault()
        //    console.log(state);
        // 收集数据：文档写有formdata格式，(图片要是2进制的)所以使用formdata对象收集数据
        // formdata对象必须是dom对象 
        var fd = new FormData(this)
        fd.append('state', state)
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // console.log(blob);
                fd.append('cover_img',blob)
                // fd.forEach((item)=>{console.log(item)})
                // 调接口，发请求，因为嵌套太多，所以封装一个函数
                publishArticle(fd)
            })
        // 打印数据测试
        /*   fd.forEach(function(item){
              console.log(item);
          }) */
        //   写这个！！！！！！！
        // fd.forEach((item)=>{console.log(item)})
        //    fd.forEach(item => console.log(item))
        
        

    })
    // 调接口，发请求，因为嵌套太多，所以封装一个函数
    // 使用formdata传数据，要有两个contentType:false;processData:false
    function publishArticle(fd) {
        $.ajax({
            method:'POST',
            url:'/my/article/add',
            data:fd,
            // formdata需要传两个特殊参数
            contentType:false,
            processData:false,
            success(res){
                // console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message,{icon:5})
                }
                layui.layer.msg(res.message,{icon:6},function(){
                    // 但是高亮没有，所以触发index.html的点击事件
                    // location.href='/article/art_list.html'
                    // 平时写应该是window.document，这里是window的window
                    // 在首页给‘文章列表添加id’
                    // window.parent.document.getElementById('article_list').click()
                    // js或者jq:
                    window.parent.$('#article_list').click()

                })
            }
        }) 
    }
})